<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="form" ref="wageMonthRef" :rules="wageMonthRules">
            <el-form-item label="工资月份" :label-width="formLabelWidth"
                          prop="month">
                <el-date-picker v-model="form.month" type="month" placeholder="选择月份" value-format="YYYY-MM-DD"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">统计</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
    import {ref} from "vue";
    import {httpService} from "@/utils/httpService";
    import {ElMessage, ElForm} from "element-plus";
    import {vxRule} from "@/utils/validator";

    export default {
        name: "teacher",
        components: {ElForm, ElMessage},
        data() {
            return {
                dialogFormVisible: ref(false),
                departmentList: [],
                subjectList: [],
                form: {
                    month: "",
                },
                // 校验规则
                wageMonthRules: {
                    month: vxRule(true, null, "blur"),
                },
            };
        },
        methods: {
            closeDialog() {
                this.clear();
            },
            cancel() {
                this.dialogFormVisible = false;
                this.clear();
            },
            clear() {
                this.dialogFormVisible = false;
                //清空form
                    this.form.teacherNumber = "";
                    this.form.teacherName = "";
                    this.form.departmentName = "";

            },
            save() {
                this.$parent.calculation(this.form.month);
                this.clear();
            },
        },
    };
</script>
<style>
</style>